<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the layers-csv sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/layers-csv/index.html
  -->
    <title>Intro to CSVLayer | Sample | ArcGIS API for JavaScript 4.16</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: aliceblue;
        }
        #viewDiv canvas {
            filter: drop-shadow(16px 16px 10px rgba(0, 0, 0, 0.5));
        }

        .esri-legend {
            background-color: rgba(255, 255, 255, 0.8);
        }
    </style>

    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>



    <script>
        require([
            "esri/WebScene",
            "esri/layers/CSVLayer",
            "esri/views/SceneView"
        ], function (WebScene, CSVLayer, SceneView) {
            // If CSV files are not on the same domain as your website, a CORS enabled server
            // or a proxy is required.
            var url = "/csv/earthquakes.csv" ;
               // "https://developers.arcgis.com/javascript/latest/sample-code/layers-csv/live/earthquakes.csv";

            // Paste the url into a browser's address bar to download and view the attributes
            // in the CSV file. These attributes include:
            // * mag - magnitude
            // * type - earthquake or other event such as nuclear test
            // * place - location of the event
            // * time - the time of the event

           var template = {
                title: "Earthquake Info",
                content: "Magnitude {mag} {type} hit {place} on {time}."
            };

           var  csvLayer = new CSVLayer({
                url: url,
                copyright: "USGS Earthquakes",
                popupTemplate: template
            });

            csvLayer.renderer = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "point-3d", // autocasts as new PointSymbol3D()
                    // for this symbol we use 2 symbol layers, one for the outer circle
                    // and one for the inner circle
                    symbolLayers: [
                        {
                            type: "icon", // autocasts as new IconSymbol3DLayer()
                            resource: { primitive: "circle" },
                            material: { color: [125, 84, 54, 1] },
                            size: 5
                        },
                        {
                            type: "icon", // autocasts as new IconSymbol3DLayer()
                            resource: { primitive: "circle" },
                            material: { color: [255, 84, 54, 0] },
                            outline: { color: [255, 84, 54, 0.6], size: 1 },
                            size: 25
                        }
                    ]
                }
            };

            var  map = new WebScene({
                portalItem: {
                    id: "a467ef1140de4e88acf34d38df9fb869"
                }
            });

            map.add(csvLayer);

        var view = new SceneView({
                container: "viewDiv",
                qualityProfile: "high",
                map: map,
                alphaCompositingEnabled: true,
                highlightOptions: {
                    fillOpacity: 0,
                    color: "#ffffff"
                },
                constraints: {
                    altitude: {
                        min: 700000
                    }
                }
            });
            view.environment.background = {
                type: "color",
                color: [0, 0, 0, 0]
            };
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
